let dataInfo = [
    { name: "English chan", money: 392001 },
    { name: "alex chan", money: 568932 },
    { name: "melon chan", money: 698756 },
    { name: "Clare Langner", money: 292489 },
    { name: "Abigail Rice", money: 953957 },
    { name: "Clarice Dias", money: 168472 },
    { name: "Vernon Lucas", money: 718225 },
    { name: "Nina Schmidt", money: 889147 },
];

//   console.log(dataInfo);
let nav = document.querySelector("nav");
let navBtn = document.querySelector("header>button");
let flag = false;
navBtn.onclick = () => {
    flag = !flag;
    nav.style.display = flag ? "block" : "none";
}

let liBtns = document.querySelectorAll(".btn-list>li");
let tbody = document.querySelector("table>tbody");

let count = -1;

function renderTable() {
    let money = dataInfo[count].money;
    
    let tr = document.createElement("tr");
    tr.innerHTML = `
            <td>${dataInfo[count].name}</td>
            <td>${money}</td>`;
    tbody.append(tr);
}
let arr = [];
function renderTable2() {
    tbody.innerHTML = '';
    arr.forEach(function(item){
        // let tr = document.createElement("tr");
        /* tr.innerHTML = `
            <td>${item.name}</td>
            <td>${item.money}</td>`;
        tbody.append(tr); */
        tbody.innerHTML += `<tr>
        <td>${item.name}</td>
        <td>${item.money}</td>
    </tr>`;
    });

}

liBtns.forEach(function (liBtn, index) {
    liBtn.onclick = function () {
        if (index === 0) {
            count++;
            if (count > dataInfo.length) return;
            arr.push(dataInfo[count]);
            // renderTable();
            renderTable2()
            setMoney();
        }
        if (index === 1) {
            
            /* let moneyTds = document.querySelectorAll("tbody>tr>td:last-child");
            // console.log(moneyTds);
            moneyTds.forEach(function(item){
                 item.textContent = parseInt(item.textContent)*2;
            }); */
            for(let i = 0; i<arr.length;i++){
                arr[i].money *= 2;
            }
            renderTable2()
            setMoney();
        }

        if(index === 2){
            // 查询百万富翁
            // let res = [];
            arr = arr.filter(function(item){
                console.log(item.money);
                return parseInt(item.money) > 1000000;
            });
            // console.log(res);
            renderTable2()
            setMoney();
        }

        if(index === 3){
            // 财富榜
            arr.sort(function (a, b) { return b.money - a.money; });
            renderTable2();
            setMoney();
        }
        if(index === 4){
            // 计算总额
            renderTable2();
            let total = arr.reduce(function(prev,item){
                return prev+item.money
            },0);
            // console.log(total);
            let tr = document.createElement("tr");
        tr.innerHTML = `
            <td>TOTAL</td>
            <td>${total}</td>`;
        tbody.append(tr);
        
        setMoney();
        }
    }
});

function setMoney(){
    let moneyBoxs = document.querySelectorAll("tbody>tr>td:last-child");
    moneyBoxs.forEach(function(ele){
        let money = Math.floor(ele.textContent).toFixed(2);
        // console.log(money);
        let res = formatAmount(money)
        console.log(res);
        ele.textContent = "$"+res;
    });
}

function formatAmount(value) {
	if (!value) return '0.00'
    const values = value.toString().split('.')
    let integerNum = values[0]
    let decimalNum = values[1] ? values[1] : '00'
    decimalNum = decimalNum.length === 1 ? decimalNum + 0 : decimalNum
    if (integerNum < 1000) {
      return `${integerNum}.${decimalNum}`
    }
    const list = []
    while (integerNum.length > 3) {
      list.unshift(integerNum.slice(-3))
      integerNum = integerNum.slice(0, -3)
    }
    list.unshift(integerNum)
    return `${list.join(',')}.${decimalNum}`
 }

